<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { usePopWinProvide } from '../../../common/hooks/FormHooks'
import { deleteDealerApi, queryDealerListApi } from '../../../common/service/api/dealerApi'
import DealerCreate from './comps/DealerCreate.vue'
import { dateFormatStr, deepCopyObject, popMessage, travelTree } from '../../../common/utils/normalUtils'
import CountParams from './comps/CountParams.vue'
import OrderResult from './comps/OrderResult.vue'
import { sendServiceData } from '../../../common/service'

// 状态
const state:any = reactive({
    search: {
        name: ''
    },
    resultParams: null,
    isPopResult: false,
    isPopParams: false,
    countUser: ''
})


/**
 *
 */
const { popState, actions } = usePopWinProvide({
    queryMethod: queryDealerListApi,
    deleteMethod: deleteDealerApi,
    deletePatch: false
})


/**
 * 计算金额
 */
const countMoney = async (data:any) => {
    state.countUser = data ? data.id : ''
    state.isPopParams = true
}

/**
 *
 */
const closeParamsHandler = () => {
    state.countUser = ''
    state.isPopParams = false
}

/**
 *
 * @param result
 */
const paramsResultHandler = (result:any) => {
    state.resultParams = deepCopyObject(result || {})
    state.isPopParams = false
    state.isPopResult = true
}

/**
 *
 */
const resultCloseHandler = () => {
    state.isPopResult = false
    state.resultParams = null
}

actions.queryList = async () => {
    const send = { ...state.search }
    const result = await sendServiceData(queryDealerListApi, send, state)
    if (result) {
        travelTree(result, (item:any, pItem:any) => {
            if (pItem)item.parentId = pItem.id
        })
    }
    popState.dataListSource = result
}

/**
 * 初始化
 */
onMounted(() => {
    actions.queryList()
})
</script>


<template>
  <v-page-list class="share-data"
               back
               :loading="popState.isLoading"
               :show-page="false">
    <template #search>
      <div class="form-item">
        <v-search-input v-model="state.search.name"
                        class="data-search"
                        placeholder="请输入分销商名称"
                        normal
                        @enter="actions.queryList()" />
      </div>
      <v-button type="primary"
                icon="sousuo"
                @click="actions.queryList()">
        查询
      </v-button>
      <v-button type="warning"
                icon="jine1"
                @click="countMoney()">
        计算金额
      </v-button>
      <v-button type="success"
                icon="tianjia2"
                @click="actions.popCreate()">
        添加
      </v-button>
    </template>


    <el-table :data="popState.dataListSource"
              style="width: 600px;height:100%;"
              row-key="id"
              border
              highlight-current-row
              default-expand-all>
      <el-table-column prop="name" label="分销商名称" show-overflow-tooltip />
      <el-table-column prop="type"
                       label="人员类型"
                       show-overflow-tooltip
                       align="center"
                       width="90" />
      <el-table-column prop="opt"
                       label="操作"
                       align="center"
                       width="180">
        <template #default="{row}">
          <div class="col-btn-box">
            <v-icon button
                    icon="tianjia"
                    title="添加"
                    class="icon-btn-tb"
                    @click="actions.popCreate(row)" />
            <v-icon button
                    icon="xiugai"
                    title="编辑"
                    class="icon-btn-tb"
                    @click="actions.popEdit(row)" />
            <v-icon v-if="row.type==='分销商'"
                    button
                    icon="jine1"
                    title="计算"
                    class="icon-btn-tb"
                    @click="countMoney(row)" />
            <v-icon button
                    danger
                    icon="shanchu"
                    title="删除"
                    class="icon-btn-tb"
                    @click="actions.deleteItem(row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--创建修改窗口-->
    <dealer-create v-if="popState.isPop"
                   :tree-source="popState.dataListSource" />

    <!--计算参数窗口-->
    <count-params v-if="state.isPopParams"
                  :user-id="state.countUser"
                  @result="paramsResultHandler"
                  @close="closeParamsHandler" />
    <!--创建修改窗口-->
    <order-result v-if="state.isPopResult"
                  :result="state.resultParams"
                  @close="resultCloseHandler" />
  </v-page-list>
</template>

<style scoped lang="scss">
.form-item{
  flex:none;
  margin-right: 10px;
}

.gap-btn{
  margin-left: 12px;
}

.col-btn-box{
  @include hor-group(center) ;
  flex:none;
  width:100%;
  .icon-btn-tb {
    font-size:18px;
    padding: 0 5px;
    box-sizing: border-box;
    &:hover{
      color:$f-color-light;
    }
  }
  .icon-btn2-tb {
    font-size:18px;
    padding: 0 5px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
  }
}


</style>
